Jassif Team Institution

Vue Components

Vue-এর উপাদানগুলি আমাদের ওয়েব পৃষ্ঠাকে ছোট ছোট টুকরোগুলিতে বিভক্ত করার অনুমতি দেয় যেগুলির সাথে কাজ করা সহজ৷

একটি Vue উপাদান তার নিজস্ব বিষয়বস্তু এবং যুক্তি সহ ওয়েব পৃষ্ঠার বাকি অংশ থেকে বিচ্ছিন্নভাবে কাজ করতে পারে।

একটি ওয়েব পৃষ্ঠায় প্রায়ই বিভিন্ন Vue উপাদান থাকে।

What are Components?

উপাদানগুলি হল পুনঃব্যবহারযোগ্য এবং স্বয়ংসম্পূর্ণ কোডের টুকরো যা ব্যবহারকারীর ইন্টারফেসের একটি নির্দিষ্ট অংশকে এনক্যাপসুলেট করে যাতে আমরা স্কেলযোগ্য এবং সহজে রক্ষণাবেক্ষণযোগ্য Vue অ্যাপ্লিকেশনগুলি তৈরি করতে পারি।

Vue-তে আমরা নিজেরাই উপাদান তৈরি করতে পারি, অথবা বিল্ট-ইন উপাদান ব্যবহার করতে পারি যা আমরা পরে শিখব, যেমন <Teleport> বা <KeepAlive>। এখানে আমরা নিজেদের তৈরি করা উপাদানগুলির উপর ফোকাস করব।

Creating a Component

উপাদানগুলি Vue-তে একটি অত্যন্ত শক্তিশালী হাতিয়ার কারণ তারা আমাদের ওয়েব পৃষ্ঠাগুলিকে আরও স্কেলযোগ্য এবং বড় প্রকল্পগুলি পরিচালনা করা সহজ করে তোলে।

আসুন একটি উপাদান তৈরি করি এবং এটি আমাদের প্রকল্পে যোগ করি।

1. src ফোল্ডারের ভিতরে উপাদান নামে একটি নতুন ফোল্ডার তৈরি করুন।
2. উপাদান ফোল্ডারের ভিতরে, FoodItem.vue নামে একটি নতুন ফাইল তৈরি করুন। প্যাসকাল কেস নামকরণ পদ্ধতির সাথে উপাদানগুলির নামকরণ করা সাধারণ, কোন স্পেস ছাড়াই এবং একটি বড় অক্ষর দিয়ে শুরু হওয়া সমস্ত নতুন শব্দ, প্রথম শব্দ।
3. FoodItem.vue :

<template>
  <div>
    <h2>{{ name }}</h2>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: 'Apples',
      message: 'I like apples'
    }
  }
};
</script>

<style></style>

আপনি উপরের উদাহরণে দেখতে পাচ্ছেন, আমাদের প্রধান App.vue ফাইলের মতোই উপাদানটিতে <টেমপ্লেট>, <স্ক্রিপ্ট> এবং <স্টাইল> ট্যাগ রয়েছে।

Adding The Component

লক্ষ্য করুন যে উপরের উদাহরণে <script> ট্যাগটি এক্সপোর্ট ডিফল্ট দিয়ে শুরু হয়। এর মানে হল যে ডেটা অ্যাট্রিবিউট সহ একটি বস্তু অন্য ফাইল থেকে প্রাপ্ত বা আমদানি করা যেতে পারে। আমরা এটি main.js ফাইলের সাথে আমদানি করে আমাদের বিদ্যমান প্রকল্পে FoodItem.vue কম্পোনেন্ট বাস্তবায়ন করতে ব্যবহার করব।

প্রথমে, আপনার মূল main.js ফাইলের শেষ লাইনটিকে দুটি লাইন হিসাবে পুনরায় লিখুন:

import { createApp } from 'vue'

import App from './App.vue'

const app = createApp(App)
app.mount('#app')

এখন, আপনার main.js ফাইলে FoodItem.vue কম্পোনেন্ট যোগ করুন লাইন 4 এবং 7 যোগ করে:

import { createApp } from 'vue'

import App from './App.vue'
import FoodItem from './components/FoodItem.vue'

const app = createApp(App)
app.component('food-item', FoodItem)
app.mount('#app')

লাইন 7-এ, উপাদানটি যুক্ত করা হয়েছে যাতে এটি আমাদের App.vue ফাইলের <টেমপ্লেট> ট্যাগের ভিতরে একটি কাস্টম <food-item/> ট্যাগ হিসাবে ব্যবহার করা যেতে পারে, যেমন:

<template>
  <h1>Food</h1>
  <food-item/>
  <food-item/>
  <food-item/>
</template>

<script></script>

<style></style>

এছাড়াও, App.vue ফাইলে <style> ট্যাগের ভিতরে কিছু স্টাইলিং যোগ করা যাক। নিশ্চিত করুন যে ডেভেলপমেন্ট সার্ভার চলছে, এবং ফলাফল পরীক্ষা করুন।

<template>
  <h1>Food</h1>
  <food-item/>
  <food-item/>
  <food-item/>
</template>

<script></script>

<style>
  #app > div {
    border: dashed black 1px;
    display: inline-block;
    margin: 10px;
    padding: 10px;
    background-color: lightgreen;
  }
</style>

Individual Components

Vue-তে উপাদানগুলির সাথে কাজ করার সময় একটি খুব দরকারী এবং শক্তিশালী বৈশিষ্ট্য হল যে আমরা তাদের পৃথকভাবে আচরণ করতে পারি, আমাদেরকে সাধারণ জাভাস্ক্রিপ্টের মতো অনন্য আইডি দিয়ে উপাদানগুলি চিহ্নিত করতে হবে না। Vue স্বয়ংক্রিয়ভাবে প্রতিটি উপাদান পৃথকভাবে পরিচালনার যত্ন নেয়।

<div> উপাদানটি ক্লিক করা হলে গণনা করা যাক।

আমাদের প্রধান অ্যাপ্লিকেশন ফাইল, App.vue-তে যোগ করা একমাত্র জিনিসটি হল CSS-এ উল্লেখ করা যে হোভারে ক্লিক ফাংশন এমন কিছু যা কার্সারকে হাতের ইশারা করার মতো দেখায়।

#app > div:hover {
  cursor: pointer;
}

আমাদের কম্পোনেন্ট ফাইল FoodItem.vue-এ আমাদের একটি ডেটা প্রপার্টি কাউন্ট, <div> এলিমেন্টের জন্য একটি ক্লিক লিসেনার, ক্লিক করার সময় চালানোর একটি পদ্ধতি এবং গণনা প্রদর্শনের জন্য একটি টেক্সট ইন্টারপোলেশন {{}} যোগ করতে হবে।

<template>
  <div v-on:click="countClicks">
    <h2>{{ name }}</h2>  
    <p>{{ message }}</p>
    <p id="red">You have clicked me {{ clicks }} times.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: 'Apples',
      message: 'I like apples',
      clicks: 0
    }
  },
  methods: {
    countClicks() {
      this.clicks++;
    }
  }
}
</script>

<style>
  #red {
    font-weight: bold ;
    color: rgb(144, 12, 12);
  }
</style>

প্রতিটি <div> উপাদানের জন্য গণনা পরিচালনা করার জন্য Vue-কে অনন্য আইডি সংজ্ঞায়িত করতে বা কোনো অতিরিক্ত কাজ করতে হবে না, Vue স্বয়ংক্রিয়ভাবে এটি করে।

কিন্তু ভিন্ন ভিন্ন কাউন্টার মান ছাড়াও, <div> উপাদানের বিষয়বস্তু এখনও একই। পরবর্তী পৃষ্ঠায় আমরা উপাদান সম্পর্কে আরও জানব যাতে উপাদানগুলি আরও অর্থপূর্ণ উপায়ে ব্যবহার করা যায়। উদাহরণস্বরূপ, প্রতিটি <div> উপাদানে বিভিন্ন ধরনের খাদ্য প্রদর্শন করা আরও বোধগম্য।

Vue Exercises

main.js Vue :

app.component('fish-type', FishType)

আমি কিভাবে App.vue এ এই উপাদান যোগ করতে পারি?

<template>
  <h1>Fish</h1>
  ______
</template>